<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /* 
        1、获取document dom树
            window.document
        2、从document中获取要操作的元素
            1、直接获取
            2、间接获取
        3、对元素进行操作
            1、操作元素的属性
            2、操作元素的样式
            3、操作元素的文本
            4、增删元素        
        */
       function fun1(){
        // 1、获得document
        // 2、通过document获得元素
        var el1 = document.getElementById("username")// 根据元素的id值，获取页面上唯一的一个元素
        console.log(el1)
       }

       function fun2(){
        var els = document.getElementsByTagName("input")// 根据元素名获取元素
        console.log(els)
        for(var i=0; i<els.length; i++){
            console.log(els[i])
        }
       }

       function fun3(){
        var els = document.getElementsByName("aaa")// 根据name属性获取元素
        console.log(els)
        for(var i=0; i<els.length; i++){
            console.log(els[i])
        }
       }

       function fun4(){
        var els = document.getElementsByClassName("a")// 根据class属性获取元素
        console.log(els)
        for(var i=0; i<els.length; i++){
            console.log(els[i])
        }
       }

       function fun5(){
        var div01 = document.getElementById("div01")
        var cs = div01.children // 通过父元素获取全部子元素
        for(var i=0; i<cs.length; i++){
            console.log(cs[i])
        }
        console.log(div01.firstElementChild) // 通过父元素获取第一个子元素
        console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素
        console.log(div01.firstChild)
        console.log(div01.lastChild)
       }

       function fun6(){
        var pinput = document.getElementById("password")
        console.log(pinput.parentElement) // 获取父元素
       }

       function fun7(){
        var pinput = document.getElementById("password")
        console.log(pinput.previousElementSibling)// 获取前面的第一个兄弟元素
        console.log(pinput.nextElementSibling)// 获取后面的第一个兄弟元素
       }
    </script>
</head>

<body>
    <input type="button" value="根据父元素获取子元素" onclick="fun5()" id="btn05">
    <input type="button" value="根据子元素获取父元素" onclick="fun6()" id="btn06">
    <input type="button" value="根据当前元素获取兄弟元素" onclick="fun7()" id="btn07">
    <input type="button" value="根据class属性值获取多个元素" onclick="fun4()" id="btn08">
    <hr>
    <div id="div01">
        <input class="a" type="text" id="username" name="aaa">
        <input class="a" type="text" id="password" name="aaa">
        <input class="b" type="text" id="email">
        <input class="b" type="text" id="address">
    </div>
    <input type="text"><br>
    <input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01">
    <input type="button" value="根据标签名获取多个元素" onclick="fun2()" id="btn02">
    <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03">
    <input type="button" value="根据class属性值获取多个元素" onclick="fun4()" id="btn04">
</body>
</html>